<template>
  <div class="material-info">
    <div class="material-info-header">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="material-info-box">
      <!-- 分类 -->
      <div class="material-info-clssify">
        <div class="material-classify">
          <div class="material-classify-title">素材详情</div>
          <div class="material-classify-content">
            <div
              :class="[
                'material-classify-content-list',
                'material-classify-content-list-active',
              ]"
              v-for="(classify, index) in classifyData"
              :key="index"
            >
              {{ classify.title }}
            </div>
          </div>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="material-info-introduce">
        <div class="material-info-introduce-title">素材介绍</div>
        <div class="material-info-introduce-content">
          <div class="material-info-introduce-content-img">
            <img :src="materialInfoData.pic" alt="" />
          </div>
          <div class="material-info-introduce-content-details">
            <div class="material-info-introduce-content-details-name">
              {{ materialInfoData.title }}
            </div>
            <div class="material-info-introduce-content-details-box">
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">素材编号：</div>
                <div class="text-color-5">{{ materialInfoData.m_number }}</div>
              </div>
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">尺寸/格式：</div>
                <div class="text-color-5">{{ materialInfoData.spec }}</div>
              </div>
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">大小：</div>
                <div class="text-color-5">{{ materialInfoData.size }}</div>
              </div>
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">合适工艺：</div>
                <div class="text-color-5">{{ materialInfoData.craft }}</div>
              </div>
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">合适设计区域：</div>
                <div class="text-color-5">
                  {{ materialInfoData.design_area }}
                </div>
              </div>
              <div class="material-info-introduce-content-details-box-list">
                <div class="text-color-4">合适品类：</div>
                <div class="text-color-5">{{ materialInfoData.fit_cate }}</div>
              </div>
            </div>
            <!-- 收藏 el-icon-star-on -->
            <div class="material-info-introduce-content-collect">
              <el-button
                type="warning"
                icon="el-icon-star-off"
                round
                v-if="materialInfoData.is_collect == 0"
                @click="onCollectMaterial"
                >收藏素材</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-star-on"
                round
                v-else
                @click="onCancelCollectMaterial"
                >取消收藏素材</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import Material from '@/api/material';
import Collect from '@/api/collect';
import Way from '@/utils/way';

export default {
  name: 'materialInfo',
  components: { Breadcrumb },
  props: {},
  data() {
    return {
      headerTitle: ['素材市场', '素材详情'],
      classifyData: [{ title: '素材详情' }], // 分类列表
      materialInfoData: {}, // 素材详情
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getMaterialInfo(this.$route.query.id);
  },
  methods: {
    // 获取素材详情
    getMaterialInfo(id) {
      const that = this;
      Material.getMaterialInfo({ id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.materialInfoData = res.data;
        }
      });
    },

    // 收藏素材
    onCollectMaterial() {
      const materialInfoData = this.materialInfoData;
      const that = this;
      Material.getMaterialCollect({ id: materialInfoData.id }).then((res) => {
        if (res.code == 200) {
          that.materialInfoData.is_collect = 1;
          Way.setMessage('收藏成功', 1, true);
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 取消收藏素材
    onCancelCollectMaterial() {
      const materialInfoData = this.materialInfoData;
      const that = this;
      Collect.delCollectMaterial({ ids: [materialInfoData.is_collect] }).then(
        (res) => {
          console.log(res);
          if (res.code == 200) {
            that.materialInfoData.is_collect = 0;
            Way.setMessage('取消收藏成功', 1, true);
          } else {
            Way.setMessage(res.msg, 3);
          }
        }
      );
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/left-side-180.less';
.material-info {
  .material-info-header {
    padding: 10px 0;
  }

  .material-info-box {
    display: flex;

    .material-info-clssify {
      margin-right: 24px;
      width: 180px;
    }
    // 介绍
    .material-info-introduce {
      flex: 1;

      .material-info-introduce-title {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #f1f1f1;
      }

      .material-info-introduce-content {
        display: flex;
        padding-top: 20px;

        .material-info-introduce-content-img {
          margin-right: 24px;
          width: 350px;
          height: 350px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .material-info-introduce-content-details {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;

          .material-info-introduce-content-details-name {
            width: 620px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .material-info-introduce-content-details-box {
            display: flex;
            flex-direction: column;
            border-radius: 4px;
            margin-top: 10px;
            padding: 15px 20px 0;
            background-color: #f1f1f1;

            .material-info-introduce-content-details-box-list {
              display: flex;
              padding-bottom: 15px;
              font-size: 14px;
            }
          }

          .material-info-introduce-content-collect {
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }
}
</style>
